<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="自营商品分佣设置" name="1" v-loading="loading">
          <el-form-item label="是否开启分佣">
            <el-switch v-model="form.open" active-color="#13ce66" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <div v-if="form.open">
            <el-form-item label="分润方式" prop="compute_mode">
              <el-radio v-model="form.compute_mode" :label="0">固定价格</el-radio>
              <el-radio v-model="form.compute_mode" :label="1">固定比例</el-radio>
            </el-form-item>
            <div v-if="form.compute_mode===0">
              <el-form-item label="一级固定价格" prop="first_level_price">
                <el-input placeholder="请输入一级固定价格" class="input" maxlength="8" @input="limitInput($event,'first_level_price')" v-model="form.first_level_price">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定价格" prop="second_level_price">
                <el-input placeholder="请输入二级固定价格" class="input" maxlength="8" @input="limitInput($event,'second_level_price')" v-model="form.second_level_price">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <div v-if="form.compute_mode===1">
              <el-form-item label="一级固定比例" prop="first_level_ratio">
                <el-input placeholder="请输入一级固定比例" class="input" maxlength="8" @input="limitInput($event,'first_level_ratio')" v-model="form.first_level_ratio">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="二级固定比例" prop="second_level_ratio">
                <el-input placeholder="请输入二级固定比例" class="input" maxlength="8" @input="limitInput($event,'second_level_ratio')" v-model="form.second_level_ratio">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="代销商品小程序分佣设置" name="2" v-if="platform_shop">
          <el-form-item label="是否开启分佣">
            <el-switch v-model="form.open" active-color="#13ce66" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <!-- form.open&&form.proxy_goods_rule -->
          <el-form-item label="分佣方式" v-if="0">
            <br />
            <div>
              <div class="title">282礼包</div>
              <div class="content">
                <el-input class="input" maxlength="8" @input="limitInputtwo($event,'oneVal')" v-model="oneVal">
                  <template slot="prepend">一级</template>
                  <template slot="append">元</template>
                </el-input>
                <el-input class="input" maxlength="8" @input="limitInputtwo($event,'twoVal')" v-model="twoVal">
                  <template slot="prepend">二级</template>
                  <template slot="append">元</template>
                </el-input>
                <div>
                  <el-input class="input m" maxlength="8" @input="limitInputtwo($event,'threeVal')" v-model="threeVal">
                    <template slot="prepend">市级代理</template>
                    <template slot="append">元</template>
                  </el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="title">6750礼包</div>
              <div class="content">
                <el-input class="input m" maxlength="8" @input="limitInputtwo($event,'cardVal1')" v-model="cardVal1">
                  <template slot="prepend">平台合伙人</template>
                  <template slot="append">元</template>
                </el-input>
                <el-input class="input b" maxlength="8" @input="limitInputtwo($event,'cardVal2')" v-model="cardVal2">
                  <template slot="prepend">【间接】市级代理 / 县级代理</template>
                  <template slot="append">元</template>
                </el-input>
                <div>
                  <el-input class="input b" maxlength="8" @input="limitInputtwo($event,'cardVal3')" v-model="cardVal3">
                    <template slot="prepend">
                      【直接】市级代理 / 县级代理</template>
                    <template slot="append">元</template>
                  </el-input>
                </div>
                <el-input class="input b" maxlength="5" @input="limitInputtwo($event,'cardVal4')" v-model="cardVal4">
                  <template slot="prepend">
                    市级代理 / 县级代理</template>
                  <template slot="append">%实际销售价</template>
                </el-input>
                <el-input class="input b" maxlength="5" @input="limitInputtwo($event,'cardVal5')" v-model="cardVal5">
                  <template slot="prepend">
                    市级代理 / 县级代理</template>
                  <template slot="append">%实际销售价</template>
                </el-input>
              </div>
            </div>

            <div>
              <div class="title">差价分佣</div>
              <div class="content">
                <el-input class="input b" maxlength="8" value="折扣差" disabled>
                  <template slot="prepend">
                    平台合伙人</template>
                  <template slot="append">* 实际销售价</template>
                </el-input>
                <el-input class="input b" maxlength="8" value="折扣差" disabled>
                  <template slot="prepend">【间接】市级代理 / 县级代理</template>
                  <template slot="append">* 实际销售价</template>
                </el-input>
                <div>
                  <el-input class="input b" maxlength="8" value="折扣差" disabled>
                    <template slot="prepend">【直接】市级代理 / 县级代理</template>
                    <template slot="append">* 实际销售价</template>
                  </el-input>
                </div>
                <div>
                  <el-input class="input b" maxlength="5" @input="limitInputtwo($event,'lastVal1')" v-model="lastVal1">
                    <template slot="prepend">
                      市级代理 / 县级代理</template>
                    <template slot="append">% 实际销售价</template>
                  </el-input>
                  <el-input class="input b" maxlength="5" @input="limitInputtwo($event,'lastVal2')" v-model="lastVal2">
                    <template slot="prepend">
                      市级代理 / 县级代理</template>
                    <template slot="append">% 实际销售价</template>
                  </el-input>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商家分享设置" name="3" v-loading="loading">
          <el-form-item label="是否开启分享">
            <el-switch v-model="form.is_share" @change="switchTrue" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <!-- <el-form-item label="是否开启App分享" v-if="form.is_share">
						<el-switch  v-model="form.is_app_share"   :active-value="true" :inactive-value="false"></el-switch>
					</el-form-item> -->
          <el-form-item label="是否开启小程序分享" v-if="form.is_share">
            <el-switch v-model="form.is_applets_share" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="会员分享提成比例（%）" :rules="[
      { required: true, message: '请输入', trigger: 'blur' },

    ]">
            <el-input-number placeholder="请输入" class="input" :min="0" :max="100" :controls='false' :precision='0' v-model="form.user_share_ratio">

            </el-input-number>
          </el-form-item>
          <el-form-item label="网红分享提成比例（%）" :rules="[
      { required: true, message: '请输入', trigger: 'blur' },

    ]">
            <el-input-number placeholder="请输入" class="input" maxlength="8" :min="0" :max="100" :controls='false' :precision='0' v-model="form.net_red_share_ratio">

            </el-input-number>
          </el-form-item>
          <el-form-item label="会员打开分享商品链接的有效时间(天)" :rules="[
      { required: true, message: '请输入', trigger: 'blur' },

    ]">
            <el-input-number placeholder="请输入" class="input" maxlength="8" :min="0" :controls='false' :max="10000" :precision='0' v-model="form.user_share_valid_time">

            </el-input-number>
          </el-form-item>

        </el-tab-pane>

      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import serviceApione from '@/api/serviceApione.js'
export default {
  data () {
    return {
      activeName: '1',
      form: {
        open: false
      },
      loading: false,
      platform_shop: false,
      oneVal: '',
      twoVal: '',
      threeVal: '',
      cardVal1: '',
      cardVal2: '',
      cardVal3: '',
      cardVal4: '',
      cardVal5: '',
      lastVal1: '',
      lastVal2: '',
      rules: {
        compute_mode: [{
          required: true,
          message: '请选择分润方式',
          trigger: 'blur'
        }],
        first_level_price: [{
          required: true,
          message: '请输入一级固定价格',
          trigger: 'blur'
        }],
        second_level_price: [{
          required: true,
          message: '请输入二级固定价格',
          trigger: 'blur'
        }],
        first_level_ratio: [{
          required: true,
          message: '请输入一级固定比例',
          trigger: 'blur'
        }],
        second_level_ratio: [{
          required: true,
          message: '请输入二级固定比例',
          trigger: 'blur'
        }]
      }
    }
  },

  mounted () {
    this.searchSetting()
    this.getShopInfoAdmin()
  },

  methods: {
    switchTrue (e) {
      if (e == false) {
        this.form.is_app_share = false
        this.form.is_applets_share = false
      }
    },
    limitInput (value, name) {
      this.form[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    limitInputtwo (value, name) {
      this[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    getShopInfoAdmin () {
      serviceApione.getShopInfoAdmin().then(res => {
        if (res.data.data) {
          this.platform_shop = res.data.data.platform_shop
        }
      })
    },
    handleClick (e) {
      this.loading = true
      if (e.name == 1) {
        this.form = {

        }
        this.searchSetting()
      } else if (e.name == 2) {
        this.form = {
          proxy_goods_rule: {
            gift_one_rule: {},
            gift_two_rule: {},
            spread_price_rule: {}
          },
          open: false
        }
        this.searchShopproxyconfig()
      } else {
        this.getShare()
      }
    },

    /**
     * 查询自营商品分佣设置
     * */
    searchSetting () {
      serviceApione.getGoodsSalesConfig().then(res => {
        if (res.data && res.data.code == 200) {
          if (res.data.data) {
            this.form = res.data.data
          }
        }
        this.loading = false
      })
    },
    getShare () {
      serviceApione.getShare().then(res => {
        if (res.data && res.data.code == 200) {
          if (res.data.config) {
            this.form = res.data.config
          }
        }
        this.loading = false
      })
    },
    // 保存
    onSubmit (e) {
      if (this.activeName == 1) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            serviceApione.setGoodsSalesConfig(this.form).then(res => {
              if (res.data && res.data.code == 200) {
                this.$message.success('保存成功！')
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.activeName == 2) {
        this.form.proxy_goods_rule.gift_one_rule.one_level = this.oneVal
        this.form.proxy_goods_rule.gift_one_rule.two_level = this.twoVal
        this.form.proxy_goods_rule.gift_one_rule.city_proxy = this.threeVal

        this.form.proxy_goods_rule.gift_two_rule.direct_partner = this.cardVal1
        this.form.proxy_goods_rule.gift_two_rule.indirect_county_city = this.cardVal2
        this.form.proxy_goods_rule.gift_two_rule.direct_county_city = this.cardVal3
        this.form.proxy_goods_rule.gift_two_rule.ten_county_city = this.cardVal4
        this.form.proxy_goods_rule.gift_two_rule.seven_county_city = this.cardVal5

        this.form.proxy_goods_rule.spread_price_rule.ten_county_city = this.lastVal1
        this.form.proxy_goods_rule.spread_price_rule.seven_county_city = this.lastVal2
        serviceApione.setShopproxyconfig(this.form).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('保存成功！')
          }
        })
      } else {
        serviceApione.shareSave({
          is_share: this.form.is_share,
          is_app_share: this.form.is_app_share,
          is_applets_share: this.form.is_applets_share,
          user_share_ratio: this.form.user_share_ratio,
          net_red_share_ratio: this.form.net_red_share_ratio,
          user_share_valid_time: this.form.user_share_valid_time
        }).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('保存成功！')
          }
        })
      }
    },

    /**
     * 查询平台商家代销商品小程序分佣配置
     * */
    searchShopproxyconfig () {
      serviceApione.getShopproxyconfig().then(res => {
        if (res.data && res.data.code == 200) {
          if (res.data.data) {
            let keys = res.data.data
            this.oneVal = keys.proxy_goods_rule.gift_one_rule.one_level
            this.twoVal = keys.proxy_goods_rule.gift_one_rule.two_level
            this.threeVal = keys.proxy_goods_rule.gift_one_rule.city_proxy

            this.cardVal1 = keys.proxy_goods_rule.gift_two_rule.direct_partner
            this.cardVal2 = keys.proxy_goods_rule.gift_two_rule.indirect_county_city
            this.cardVal3 = keys.proxy_goods_rule.gift_two_rule.direct_county_city
            this.cardVal4 = keys.proxy_goods_rule.gift_two_rule.ten_county_city
            this.cardVal5 = keys.proxy_goods_rule.gift_two_rule.seven_county_city

            this.lastVal1 = keys.proxy_goods_rule.spread_price_rule.ten_county_city
            this.lastVal2 = keys.proxy_goods_rule.spread_price_rule.seven_county_city

            this.form.open = keys.open
          }
        }
        this.loading = false
      })
    }
  }
}
</script>

<style>
.el-flex {
  display: flex;
}

.mt30 {
  margin-top: 30px;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}

.input {
  width: 222px;
  margin-right: 10px;
}

.m {
  width: 333px !important;
}

.b {
  width: 444px !important;
}

.content > div {
  margin-bottom: 15px;
}

.title {
  margin: 25px 0 10px 0;
  padding-left: 15px;
  border-left: 4px solid #17b3a3;
  line-height: 14px;
}
</style>
